<template>
  <div id="views" @click="bodyclick()">
    <section id="sec1">
      <p>
        <span>用户名</span>
        <span>{{$store.state.mobile}}</span>
      </p>
      <p>
        <span>名称</span>
        <span>
          <span v-if="machine">{{machine.name}}</span>
        </span>
      </p>
      <p>
        <span>单份价格</span>
        <span>
          <span v-if="machine">
            <span>
              {{machine.cnyPrice}}<span>CNY</span>
              / {{machine.usdtPrice}}<span>USDT</span>
            </span>
          </span>
        </span>
      </p>
      <p class="buyNum">
        <span>
          购买份额
          <span class="minMax">
            <span v-if="machine">
              {{minNum}}~{{maxNum}}份
            </span>
          </span>
        </span>
        <span class="right">
          <span class="add" @click="Number(num) < Number(maxNum) ? num++ : ''">+</span>
          <input type="number" v-model="num" onblur="" @blur="inputBlur" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
          <span class="acc" @click="Number(num) > Number(minNum) ? num-- : ''">-</span>
        </span>
      </p>
      <!--      <p>-->
      <!--        <span>到手总算力</span>-->
      <!--        <span>-->
      <!--          <span style="vertical-align: middle;padding-right: 0.08rem" v-if="machine">{{getPowerNum}}{{machine.unit_name}}</span>-->
      <!--          <img src="../../common/imgs/arrowright.png" alt="图片" style="vertical-align: middle;height: 0.2rem;margin-left: 0.06rem">-->
      <!--        </span>-->
      <!--      </p>-->
      <p>
        <span>BTC算力</span>
        <span>
          <span style="vertical-align: middle;padding-right: 0.08rem" v-if="machine">{{totalBasePower}}{{machine.unit_name}}</span>
        </span>
      </p>
      <p style="overflow: initial;height: 0.75rem" v-if="machine && Number(machine.bhp_power) > 0">
        <span class="relative">
          <span class="middle">BHP参配算力</span>
          <img src="../../common/imgs/gth_two.png" alt="icon" class="hoverhand middle gth" @click.stop.prevent="showBhpArea = !showBhpArea">
          <span v-if="showBhpArea" class="minWin" style="color: #626262;text-align: left;padding: 0.2rem;font-size: 0.2rem;top:calc(-100% - 0.7rem)">
            算龄未达到1000 TD，算龄达标前只有单挖产出
          </span>
        </span>
        <span>
          <span v-if="machine">{{totalBhpPower}}{{machine.unit_name}}</span>
        </span>
      </p>
      <p>
        <span>合约到期日</span>
        <span>
          <span v-if="machine">{{machine.constract_end_date}}</span>
        </span>
      </p>
      <p>
        <span>算力金额</span>
        <span style="color: #F67311">{{pay_1_Num}}{{rrmUnit}}</span>
      </p>
      <p style="overflow: initial;height: 0.75rem">
        <span class="floatleft relative">
          <span class="middle">合约期预计总收入</span><img src="../../common/imgs/gth_two.png" alt="icon" class="hoverhand gth" @click.stop.prevent="showPriceArea = !showPriceArea">
          <span v-if="showPriceArea" class="minWin">
            <span>BTC对应币价:{{machine.btc_price}}~{{this.accMul(machine.btc_price , 2)}} CNY</span>
            <span v-if="machine.bhp_price">BHP对应币价:{{machine.bhp_price}}~{{this.accMul(machine.bhp_price , 2)}} CNY</span>
          </span>
        </span>
        <span class="floatright middle" style="line-height: 0.29rem">
          {{minGetMoney}}~{{maxGetMoney}} {{rrmUnit}}
        </span>
      </p>
      <p class="btcPrice">
        *根据当前出币量计算，仅供参考
      </p>
    </section>
    <section id="sec3" v-if="machine && machine.insurance_id && Number(machine.insurance_id) > 0">
      <p class="top">
        <label for="buyMathPower" class="width100">
          <input class="hoverhand" type="checkbox" id="buyMathPower" v-model="buyMathPower">
          <span class="check" :class="buyMathPower ? 'isChecked' : ''"></span>
          <span>加配算力宝，产出享保障</span>
          <span class="hoverhand floatright showMinwin3" @click.stop.prevent="introduceDialogshow">规则</span>
        </label>
      </p>
      <div class="introduceText">
        1.每日分币后计算产出进度，产出进度=当前的累计产币量*实时币价/合约已支付金额<br>
        2.合约期内，若产出进度达到100%，次日转入产出共享阶段，用户后续分币比例调整为70%<br>
        3.合约到期，若产出进度仍不足100%，算力宝销售方以BTC向用户补足差额；
      </div>
      <p class="getMathPowerTotalMoney">
        <span>算力宝金额</span>
        <span>{{mathPowerTotalMoney}}{{rrmUnit}}</span>
      </p>
    </section>
    <section id="couponSec" v-if="machine && machine.is_use_coupons == 1">
      <div class="box">
        <p class="p1">
          <span class="floatleft">订单金额</span>
          <span class="floatright">{{orderTotalMoney}}{{rrmUnit}}</span>
        </p>
        <p class="p2">
          <span class="left floatleft">
            <img src="../../common/imgs/coupon_logo.png" alt="logo" class="couponIcon middle">
            <span class="middle">优惠券</span>
          </span>
<!--          <router-link :to="{path:'/chose_coupon' , query :{ money : pay_1_Num , rrmUnit : rrmUnit , preferential_rate : machine.preferential_rate || '1.000'}}" class="right floatright hoverhand">-->
<!--            <span class="middle" v-if="deductionNum <= 0">暂未选择</span>-->
<!--            <span class="middle" style="color: #F67311;" v-if="deductionNum > 0">已抵扣{{deductionNum}} CNY</span>-->
<!--            <img src="../../common/imgs/arrowright.png" alt="right" class="arrowright middle">-->
<!--          </router-link>-->
          <a class="right floatright"  @click="toChoseCoupon( '/chose_coupon' , )" href="javascript:;">
            <span class="middle" v-if="deductionNum <= 0">暂未选择</span>
            <span class="middle" style="color: #F67311;" v-if="deductionNum > 0">已抵扣{{deductionNum}} {{rrmUnit}}</span>
            <img src="../../common/imgs/arrowright.png" alt="right" class="arrowright middle">
          </a>
        </p>
      </div>
    </section>
    <section id="sec4">
      <p class="topTitle">选择支付方式</p>
      <div class="payTypes">
        <label :for="'pay_'+item.name" v-for="(item , index ) in pay_channel">
          <input class="hoverhand" type="radio" :id="'pay_'+item.name" v-model="payType" :value="item.name">
          <img :src="item.img" alt="图片" class="logo">
          <span class="text">{{item.text}}</span>
          <span class="leftMoney">可用：{{item.leftMoney}}</span>
          <span class="check" :class="payType === item.name ? 'checked' : ''"></span>
        </label>
      </div>
    </section>
    <section id="sec5">
      <label for="agree" class="agreements" style="position: relative">
        <input type="checkbox" id="agree" v-model="agree" class="hoverhand height100">
        <span class="leftText">我同意</span>
        <em @click.stop.prevent="showAgreement(0)" v-if="machine">《{{machine.contract[0].name}}》</em>
        <em @click.stop.prevent="showAgreement(1)" v-if="buyMathPower">《{{machine.insurance_contract.name}}》</em>
      </label>
      <div id="submitArea">
        <div>
          <p class="totalMoney">
            <span>总计金额</span><span>{{totalPay}} {{rrmUnit}}</span>
          </p>
          <p class="wishGet relative">
            <span>预计净产出</span><span>{{wish_min}}~{{wish_max}} {{rrmUnit}}</span>
            <img src="../../common/imgs/gth_two.png" alt="图片" class="gth_one hoverhand" @click.stop.prevent="minwin3 = !minwin3" style="height: 0.25rem">
            <span v-if="minwin3" class="minWin">
              <span>BTC对应币价:{{machine.btc_price}}~{{this.accMul(machine.btc_price , 2)}} CNY</span>
              <span v-if="machine.bhp_price">BHP对应币价:{{machine.bhp_price}}~{{this.accMul(machine.bhp_price , 2)}} CNY</span>
            </span>
          </p>
          <!--          <p class="coinPrice">-->
          <!--            <span>对应币价:</span><span v-if="machine">{{machine.btc_price}}~{{this.accMul(machine.btc_price , 2)}} CNY</span>-->
          <!--          </p>-->
        </div>
        <button id="submit" @click="rent">立即支付</button>
      </div>
    </section>
    <introduce-dialog ref="dl"></introduce-dialog>
    <agree-ment ref="ag" hasReadText="已阅读此协议" @isRead=""></agree-ment>
    <dia-log ref="dl2" msg="您尚未实名认证,需要立即去实名吗？" @confirm="confirmRent()"></dia-log>
    <dia-log ref="dl360" msg="" @confirm="confirmChose360()" @cancel="cancel360()"></dia-log>
  </div>
</template>
<script>
  import {isRelNameVerify, orderAgreement , orderRent} from '../../http/api';
  export default {
    name:'need_electric_power_pay',
    components:{
      introduceDialog : resolve => { require(['../../components/introduceDialog'], resolve) },
      AgreeMent: resolve => { require(['../../components/AgreeMent'], resolve)  },
      DiaLog: resolve => {require(['../../components/dialog'], resolve)},
    },
    data(){
      return{
        introduce: '不包电矿机支付',
        userName : '',
        machine : null,
        minNum : '',//最低购买数量
        maxNum:'',//最高购买数量
        num : '',//购买份数
        getPowerNum : '',//到手总算力
        pay_1_Num : '',//算力金额
        payUnitPrice : '',//选择的支付方式的单价
        minGetMoney : '',//最低产出
        maxGetMoney : '',//最多产出
        buyMathPower : '',//是否购买算力宝
        baozhangText : '',
        stopLossNum : '0',
        mathPowerTotalMoney : '',//算力宝总金额
        pay_channel : null,//所有支付方式
        orderTotalMoney:"0",//总金额
        payType : 'RRM_CASH',//支付方式
        rrmUnit : 'CNY',//页面显示的支付币种名称
        payTypesImgs:{ //预加载所有支付方式图片
          RRM_CASH : require('../../common/imgs/wallet.png'),
          RRM_USDT : require('../../common/imgs/usdt.png'),
        },
        deduction : false,//选择btc抵扣电费
        agree : false,//同意协议
        wish_min : '--',//预计产出 最小
        wish_max:'--',//预计产出 最大
        maxDays : '',//最大购买天数
        asset:'',//资产
        sliceNumLen : 2,//公共截取位数
        showPriceArea : false,
        showBhpArea : false,
        minwin3 : false,
        totalBasePower : '',//总btc算力
        totalBhpPower : '', //总bhp配餐算力
        insurance : '',
        deductionNum : 0,//优惠券抵扣金额
        chose_coupons : [],
        totalPay : '',//最终支付金额
      }
    },
    watch:{
      num( val ){
        if(Number(val) > Number(this.maxNum)){
          this.num = this.maxNum
        }
        this.numChange();
      },
      payType( val ){
        let thiz = this;
        switch (val) {
          case 'RRM_CASH':
            thiz.payUnitPrice = thiz.machine.cnyPrice;
            thiz.rrmUnit = 'CNY';
            thiz.sliceNumLen = 2;
            break;
          case 'RRM_USDT':
            thiz.payUnitPrice = thiz.machine.usdtPrice;
            thiz.rrmUnit = 'USDT';
            thiz.sliceNumLen = 4;
            break;
        }
        this.numChange();
      },
      buyMathPower( val ){
        let thiz = this;
        this.numChange();
        if ( val && Number(thiz.inputDays) < Number(thiz.maxDays)) {
          thiz.dialog360show();
        }
      }
    },
    mounted() {
      let thiz = this ,
        query = this.$route.query ,
        machine = JSON.parse( query.machine );
      // console.log('query.machine',query.machine)
      thiz.asset = JSON.parse( query.asset );
      thiz.maxNum =machine.productNum > machine.maxLimitNum ? machine.maxLimitNum : machine.productNum;
      thiz.minNum = machine.minLimitNum;
      thiz.pay_channel = machine.pay_channel;
      thiz.packagePayTypes();//支付方式组装
      thiz.maxDays = machine.constract_date_num;//最大购买天数
      thiz.for(machine.good_deposit , (item , index)=> {
        switch (item.pay_currency) {
          case "CNY":
            machine.cnyPrice = Number(item.goods_deposit);
            thiz.pay_1_Num = machine.cnyPrice;
            thiz.payUnitPrice = machine.cnyPrice;
            break;
          case "USDT":
            machine.usdtPrice = Number(item.goods_deposit);
            break;
        }
      });
      thiz.insurance = machine.insurance ? machine.insurance : '';
      thiz.stopLossNum = machine.insurance ?  machine.insurance.stop_loss_rate : 0;
      // console.log('machine',machine)
      thiz.machine = machine;
      thiz.getPowerNum = thiz.accMul(thiz.num , machine.computing_power);
      thiz.buyMathPower = true;
      isRelNameVerify({noToast : true}).then(res => {
        if(res.code == 200){
          thiz.userName = res.data.name;
        }
      });
      // thiz.packageChoseCoupons();
      thiz.num = thiz.$store.state.rent_num || thiz.minNum;
      thiz.buyMathPower = this.$store.state.buy_math_power;
      let payType = this.$store.state.payType;
      if( payType ){
        thiz.payType = payType;
      }
    },
    methods:{
      toChoseCoupon( path  ){
        let $store = this.$store;
        let thiz = this;
        $store.commit('rent_num' , thiz.num); //租用数量
        $store.commit('buy_math_power' , thiz.buyMathPower); //购买算力宝
        $store.commit('payType' , thiz.payType); //支付方式
        let query = {money : thiz.pay_1_Num , rrmUnit : thiz.rrmUnit , preferential_rate : thiz.machine.preferential_rate };
        this.$router.push({ path : path ,query : query });
      },
      getDeductionMoney(){
        //获取抵扣金额
        let thiz = this;
        let chose_coupons = this.chose_coupons;
        let machine = thiz.machine;
        let disNum = 0;
        let rrmUnit = thiz.rrmUnit;
        thiz.for( chose_coupons , (item , index) => {
          disNum = thiz.accAdd( disNum , item.confMap[rrmUnit].dis );
        });
        let maxDisMoney = thiz.accMul(thiz.pay_1_Num ,  machine.preferential_rate) || 0;
        let deductionNum = disNum < maxDisMoney ? disNum : maxDisMoney;
        console.log('deductionNum',deductionNum)
        thiz.deductionNum = deductionNum ? deductionNum : 0;
      },
      packageChoseCoupons(){
        let thiz = this;
        let storeChoseCoupons = thiz.$store.state.chose_coupons;
        thiz.chose_coupons = storeChoseCoupons == '[]' ||  storeChoseCoupons.length == 0 ? [] : JSON.parse(storeChoseCoupons);//获取已选择的优惠券数组
        this.getDeductionMoney();
      },
      bodyclick(){
        this.showPriceArea = false ;
        this.showBhpArea =  false;
        this.minwin3 = false;
      },
      showAgreement(type){
        let thiz = this ,
          machineAgreementCode = this.machine.contract[0].code, //普通矿机协议code
          mathPowerAgreement = this.machine.insurance_contract.content;//高波动算力包协议
        if( type === 0){
          let params = {
            machine_id : thiz.machine.machine_id,
            code : machineAgreementCode,
            currency : thiz.payType,
            num : thiz.num
          };
          orderAgreement(params).then(res => {
            if( res.code == 200 ){
              this.$refs.ag.agreement( res.data.contact.content );
            }
          });
        }else{
          this.$refs.ag.agreement(mathPowerAgreement);
        }
      },
      packagePayTypes(){
        let thiz = this ,
          pay_channel =  thiz.pay_channel;
        let newArr = [];
        thiz.for(pay_channel , function ( item , index ) {
          let curPype = item;
          let newItem= {};
          newItem.img = thiz.payTypesImgs[curPype];
          newItem.name = item;
          switch (curPype) {
            case 'RRM_CASH':
              newItem.text = '现金钱包'; newItem.leftMoney = thiz.asset.CNY;
              break;
            case 'RRM_USDT':
              newItem.text = 'USDT'; newItem.leftMoney = thiz.asset.USDT;
              break;
          }
          newArr.push(newItem);
        });
        thiz.pay_channel = newArr;
      },
      numChange(){
        //输入变化，计算
        let thiz = this ,
          num = Number(thiz.num),
          computing_power = Number(thiz.machine.computing_power);
        thiz.getPowerNum = thiz.accMul(num , computing_power);
        thiz.getAllPayNum();
      },
      getAllPayNum(){
        //计算各种总价
        let thiz = this,
          rrmUnit = thiz.rrmUnit,//选择的支付方式币种名称
          sliceNum = thiz.sliceNumLen,
          usdtExchge  = rrmUnit === 'CNY' ?  1 : thiz.machine.exchange_rate; //如果是usdt   汇率
        thiz.pay_1_Num = thiz.sliceNum(thiz.accMul( thiz.num , thiz.payUnitPrice) , sliceNum );
        this.packageChoseCoupons();
        thiz.minGetMoney = thiz.sliceNum(
          thiz.accDiv(
            thiz.accMoreMul(thiz.machine.predict_income,   thiz.num ,  thiz.machine.regular_date_num ),
          usdtExchge) ,
          sliceNum);  //最低产出
        thiz.maxGetMoney = thiz.sliceNum( thiz.accMul(thiz.minGetMoney , 2 ) , sliceNum );//最大产出
        // let everyDaysPrice = rrmUnit === 'CNY' ? thiz.machine.predict_electricity : thiz.machine.predict_electricity_usdt;//矿机1T 每日价格
        thiz.getTotalPayElectricPrice();
      },
      getTotalPayElectricPrice(){
        //计算总支付电费金额、算力宝金额
        let thiz = this ,
          machine = thiz.machine,
          rentNum = thiz.num,//租用数量
          rentDays = thiz.inputDays,//天数
          base_power = machine.base_power,//基础算力
          buyMathPower = thiz.buyMathPower,//是否购买算力宝
          btcPrice = machine.btc_price,//BTC市场价格
          rrmUnit = thiz.rrmUnit;//选择的支付方式 的币种名称
        thiz.totalBasePower = thiz.accMul(machine.base_power , rentNum);
        thiz.totalBhpPower = thiz.accMul(machine.bhp_power , rentNum);
        let sliceNum = thiz.sliceNumLen; // 小数截取位数
        thiz.electricTotalPrice = machine.mine_power ?  thiz.sliceNum(
          thiz.accMoreMul(machine.mine_power , '24' , machine.computing_power , rentNum  , rentDays ) , sliceNum
        ) : 0;
        let minTotalRentMoney = thiz.sliceNum(thiz.accMul(rentNum, thiz.payUnitPrice), sliceNum);
        let baozhangText = thiz.accAdd(minTotalRentMoney, thiz.electricTotalPrice);
        let stopLossRate = thiz.accDiv(thiz.stopLossNum, 100);//算力包产出下限百分比
        let baozhangNum = thiz.sliceNum(thiz.accMul(baozhangText, stopLossRate), sliceNum);
        thiz.baozhangText = baozhangText + "*" + thiz.stopLossNum + "%=" + baozhangNum + rrmUnit;
        let mathPowerUnitPrice = 0;//算力宝单价
        if( thiz.insurance ){
          mathPowerUnitPrice = rrmUnit === 'CNY' ? thiz.insurance.cny_deposit : thiz.insurance.usdt_deposit;//算力宝单价
        }
        thiz.mathPowerTotalMoney = buyMathPower ? thiz.accMoreMul(rentNum , mathPowerUnitPrice , machine.base_power) : 0 ;//算力宝总金额
        //计算总价
        let suanliMoney = buyMathPower ? thiz.sliceNum(thiz.accMoreMul(rentNum, mathPowerUnitPrice, base_power), sliceNum) : 0;
        thiz.orderTotalMoney = thiz.sliceNum(thiz.accAddMore( minTotalRentMoney, suanliMoney) , sliceNum);
        thiz.totalPay = thiz.accSub( thiz.orderTotalMoney , this.deductionNum );
        //计算预计产出
        let regularDateNum = machine.regular_date_num;//定期天数
        let regularpayEelcMoney = thiz.sliceNum(regularDateNum, sliceNum);//合约期总共电费
        // app.sliceNum(electricityFees(rentNum, elecPrice, regularDateNum), 2);//合约期总共电费
        let estimatedNetIncome = thiz.sliceNum(thiz.accMoreMul(machine.predict_income, rentNum, regularDateNum), sliceNum);
        if( rrmUnit === 'USDT'){
          estimatedNetIncome = thiz.sliceNum(
            thiz.accDiv(
              thiz.accMoreMul(
                machine.predict_income_btc, rentNum, btcPrice,
              ),
              machine.exchange_rate),
            sliceNum
          );
        }
        var maxestimatedNetIncome = thiz.sliceNum(thiz.accMul(estimatedNetIncome, 2), sliceNum);
        var suanLiLowerlimit = thiz.accSub(baozhangNum, baozhangText);
        if( buyMathPower ){
          let thisDischarge = regularpayEelcMoney;//CNY合约期电费打折
          let myIncome = thiz.accSub(thiz.accSub(estimatedNetIncome, thisDischarge), minTotalRentMoney);//预计净产出折扣;
          let myIncomeMax = thiz.accSub(thiz.accSub(maxestimatedNetIncome, minTotalRentMoney), thisDischarge);//最大净产出打折
          thiz.wish_max = thiz.sliceNum(myIncomeMax, sliceNum);
          if (Number(suanLiLowerlimit) <= Number(myIncome)) {
            // thiz.wish_min = thiz.sliceNum(myIncome, sliceNum);
          } else {
            myIncome = thiz.accSub(thiz.accSub(estimatedNetIncome, regularpayEelcMoney), minTotalRentMoney);//预计净产出;
            // thiz.wish_min = thiz.sliceNum(suanLiLowerlimit, sliceNum);
          }
        }else{
          let myIncome = thiz.accSub(thiz.accSub(estimatedNetIncome, regularpayEelcMoney), minTotalRentMoney);
          let myIncomeMax = thiz.accSub(thiz.accSub(maxestimatedNetIncome, minTotalRentMoney), regularpayEelcMoney);
          // thiz.wish_min = thiz.sliceNum(myIncome, sliceNum);
          // thiz.wish_max = thiz.sliceNum(myIncomeMax, sliceNum);
        }

        thiz.wish_min = thiz.accSub(  thiz.accSub(thiz.minGetMoney , thiz.mathPowerTotalMoney) , thiz.pay_1_Num);
        thiz.wish_min = thiz.accAdd(thiz.wish_min , thiz.deductionNum);
        thiz.wish_min = thiz.sliceNum(thiz.wish_min, sliceNum);
        thiz.wish_max = thiz.accSub(  thiz.accSub(thiz.maxGetMoney , thiz.mathPowerTotalMoney) , thiz.pay_1_Num);
        thiz.wish_max = thiz.accAdd(thiz.wish_max , thiz.deductionNum);
        thiz.wish_max = thiz.sliceNum(thiz.wish_max, sliceNum);
      },
      clickEleArr( item , index ,disNum){
        //选择算力包日期列表
        let thiz = this;
        thiz.inputDays = item.value;
        thiz.electricActive = index;
        thiz.disCount = disNum;
      },
      inputBlur(){
        if(Number(this.num) <= Number(this.minNum)){
          this.num = this.minNum
        }
      },
      introduceDialogshow(){
        this.$refs.dl.dialogShow()
      },
      rentAjax(){
        let thiz = this,
          param = {
            machine_id : thiz.machine.machine_id ,
            num : thiz.num ,
            pay_channel : thiz.payType ,
            is_insurance : thiz.buyMathPower ? 1 : 0,
            electricity : thiz.inputDays,
            is_pay_electric : thiz.deduction ? 1 : 0
          };
        let recordIds = [];
        let chose_coupons = thiz.chose_coupons;
        thiz.for( chose_coupons , (item , index) => {
          recordIds.push(item.id);
        });
        if( recordIds.length > 0 ) {
          recordIds = recordIds.join(',');
          param.recordIds = recordIds;
        }
        orderRent(param).then(res => {
          if( res.code == 200 ){
            require('../../common/js/toast').toast('下单成功');
            thiz.$router.replace('/my_power');
          }
        })
      },
      confirmRent(){
        this.inputDays = this.maxDays;
        this.rentAjax()
      },
      dialog360show(){
        let thiz = this;
        let text = '选购算力宝，需一次性支付<span style="color:#F67311">合约期（'+ thiz.maxDays +'天）</span>所有电费，已自动为您选择'+ thiz.maxDays +'天电费包，请重新核对需支付金额。';
        thiz.$refs.dl360.changeToast(text);
        thiz.$refs.dl360.dialogShow();
      },
      confirmChose360(){
        let thiz = this;
        thiz.buyMathPower = true;
        thiz.inputDays = thiz.maxDays;
      },
      cancel360(){
        let thiz = this;
        thiz.buyMathPower = true;
        thiz.inputDays = 30;
        thiz.buyMathPower = false;
      },
      rent(){
        let thiz = this ,
          num = Number(thiz.num),
          minNum = Number(thiz.minNum),
          maxNum = Number(thiz.maxNum),
          inputDays = Number(thiz.inputDays),
          maxDays = Number(thiz.maxDays);
        if( num < minNum ){
          thiz.num = minNum;
        }
        if( num > maxNum ){
          thiz.num = maxNum;
        }
        if( inputDays  < 10 ){
          thiz.inputDays = 10;
        }
        if( inputDays  > maxDays ){
          thiz.inputDays = maxDays;
        }
        if( !thiz.agree ) {
          require('../../common/js/toast').toast('请同意协议');
          return false;
        }
        let rrmUnit = thiz.rrmUnit; // 钱的单位，，，
        let have = Number(thiz.asset[rrmUnit]);
        let totalPay = Number(thiz.totalPay);
        console.log('have',have);
        console.log('totalPay',totalPay);
        if( totalPay > have){
          require('../../common/js/toast').toast(rrmUnit+'余额不足，请充值');
          return ;
        }
        this.rentAjax();
      }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  .relative{
    position: relative;
    .minWin{
      position: absolute;z-index: 1;right: -2.15rem;width: 4.3rem;background: #fff;padding: 0.1rem;padding-bottom:0.15rem;top:calc( -100% - 0.3rem );
      background: url("../../common/imgs/boxshod.png") center center no-repeat;background-size: 100% 100%;
      font-size: 0.2rem;text-align: center;line-height: 180%;
      >span{
        display: inline-block;width: 100%;color: #262626;text-align: left;padding: 0.1rem 0.2rem;
      }
    }
  }
  #views{
    padding-bottom: 2.4rem;
  }
  section{
    background: #fff;padding: 0 0.3rem;
  }
  #sec1{
    padding-bottom: 0.25rem;
    >p{
      overflow:hidden;font-size: .28rem;padding-top: 0.44rem;
      >span:first-child{
        color: #999999;
      }
      >span:last-child{
        color: #262626;float: right;
      }
    }
    .gth{
      width: 0.29rem;vertical-align: middle;
    }
    >.btcPrice{
      padding-top: 0.13rem;text-align: right;font-size: 0.22rem;color: #999;position: relative;
    }
    >.buyNum{
      line-height: 0.46rem;
      .minMax{
        color: #D2970A;font-size: .22rem;padding-left: 0.1rem;
      }
      .right{
        input{
          float: right;background: #F3F3F3;height: 0.46rem;text-align: center;width: 1.2rem;font-size: .26rem;margin: 0 0.1rem;
        }
        >span{
          float: right;background: #F3F3F3;font-size: 0.36rem;height: 0.46rem;line-height: 0.46rem;width: 0.46rem;display: inline-block;text-align: center;
        }
        >span:hover{
          cursor: pointer;
        }
      }
    }
  }
  #sec2{
    margin-top: 0.16rem;padding: 0.28rem 0.32rem;padding-bottom: 0.4rem;
    .topTitle{
      font-size: .32rem;overflow: hidden;
      >span{
        float: left;line-height: 0.32rem;
      }
      .right{
        font-size: 0.18rem;color: #FFFFFF;height: 0.32rem;line-height: 0.32rem;background: #F8AB05;padding: 0 0.15rem;margin-left: 0.1rem;display: inline-block;border-radius: 0.02rem;
      }
    }
    .electricPrice{
      color: #898989;font-size: .24rem;overflow: hidden;padding: 0.22rem 0;
      >span:last-child{
        float: right;
      }
    }
    >.selectDays{
      padding: 0.36rem 0;padding-top: 0.14rem;
      >span{
        height: 0.82rem;line-height: 0.82rem;display: inline-block;border: 0.015rem solid#DCDCDC;border-radius: 0.04rem;text-align: center;
        position: relative;font-size: 0.3rem;margin-right: 0.22rem;width: calc( (100% - 0.66rem) / 4 );
        >span{
          position: absolute; top: -0.1rem;right: -0.1rem;display: block;width: 0.8rem; height: 0.26rem;
          background : rgba(255, 138, 80, 1);background: linear-gradient(91deg, rgba(251, 106, 62, 1), rgba(255, 138, 80, 1));
          border-radius: 0.13rem 0.13rem 0.13rem 0; font-size: 0.18rem; color: #ffffff;line-height: 0.26rem;text-align: center;
        }
      }
      >span:hover{
        cursor: pointer;
      }
      >.active{
        background: rgba(251, 210, 52, 0.08);border-color: #FBD234;
      }
      >.active:hover{
        cursor: default;
      }
      >span:last-child{
        margin-right: 0;
      }
    }
    >.inputDays>input{
      height: 0.88rem;
    }
    >.title2{
      font-size: .32rem;overflow: hidden;border-top: 0.01rem solid#E5E5E5;padding-top: 0.38rem;padding-bottom: 0.32rem;
      >.right{
        float: right;color: #F67311;
      }
    }
    >.totalPayElectricToast{
      color: #9E8C3F;font-size: .24rem;padding-left: 0.35rem;position: relative;line-height: 160%;
      >img{
        width: 0.26rem;position: absolute;left: 0;top:0.06rem;z-index: 1;
      }
    }
    >.selDeduction{
      padding: 0.33rem 0;position: relative;
      input{
        opacity: 0;position: absolute;z-index: 1;left: 0;top: 0;width: calc(100% - 0.39rem);height: 100%;
      }
      input:checked+      .isChecked{
        background: url("../../common/imgs/blackradio.png") center center no-repeat;background-size: 100% 100%;border: 0;
      }
      .check{
        display: inline-block;width: 0.3rem;height: 0.3rem;border: 0.015rem solid #E5E5E5;border-radius: 50%;vertical-align: middle;margin-right: 0.06rem;
      }
    }
  }
  #sec3{
    padding: 0 0.3rem;margin-top: 0.16rem;
    >.top{
      font-size: 0.28rem;
      >label{
        padding: 0.33rem 0;display: inline-block;position: relative;width: 100%;
        >span{
          vertical-align: middle;
        }
        >.showMinwin3{
          color: #999;font-size: 0.26rem;line-height: 0.3rem;
        }
      }
      input{
        opacity: 0;position: absolute;z-index: 1;left: 0;top:0;width: calc( 100% - 0.39rem );height: 100%;
      }
      .check{
        display: inline-block;width: 0.3rem;height: 0.3rem;border: 0.015rem solid#E5E5E5;border-radius: 50%;vertical-align: middle;margin-right: 0.06rem;
      }
      .isChecked{
        background: url("../../common/imgs/blackradio.png") center center no-repeat;background-size: 100% 100%;border: 0;
      }
      .gth_one{
        height: 0.29rem;width: 0.29rem;vertical-align: middle;margin-left: 0.1rem;
      }
    }
    >.introduceText{
      color: #9E8C3F;font-size: 0.22rem;background: #FFFDF5;padding: 0.3rem;line-height: 160%;
      >span{
        display: inline-block;
      }
      >.stopLossNum{
        padding-right: 0.15rem;
      }
      >.baozhangText{
        color:#F67311;
      }

    }
    >.getMathPowerTotalMoney{
      font-size: 0.28rem;overflow: hidden;padding: 0.3rem 0;
      >span:last-child{
        float: right;color: #F67311;
      }
    }
  }
  #couponSec{
    margin-top: 0.16rem;
    img{
      width: 0.5rem;
    }
    .p1{
      overflow: hidden;font-size: 0.26rem;
      >span{
        height: 0.9rem;display: inline-block;line-height: 0.9rem;
        >span{
          line-height: 0.9rem;
        }
      }
      >span:last-child{
        font-size: 0.28rem;color: #F67311;
      }
    }
    .p2{
      overflow: hidden;border-top: 0.01rem solid#E5E5E5;font-size: 0.26rem;
      .couponIcon{
        width: 0.3rem;
      }
      >span,>a{
        line-height: 0.9rem;height: 0.9rem;display: inline-block;
        >span{
          line-height: 0.9rem;
        }
      }
      >.right{
        >span{
          padding-right: 0.08rem;color: #999;
        }
        img{
          height: 0.2rem;width: auto;
        }
      }
    }
  }
  #sec4{
    margin-top: 0.16rem;
    .topTitle{
      font-size: 0.24rem;color: #999;padding: 0.24rem 0;
    }
    .payTypes{
      label{
        display: block;position: relative;padding: 0.28rem 0;overflow: hidden;border-top: 0.015rem solid#eee;
        input{
          position: absolute;z-index: 1;left: 0;top:0;width: 100%;height: 100%;opacity: 0;
        }
        .logo{
          width: 0.5rem;height: 0.5rem;vertical-align: middle;float: left;
        }
        >span{
          line-height: 0.5rem;vertical-align: middle;float: left;
        }
        .text{
          padding-left: 0.2rem;min-width: 2.5rem;display: inline-block;
        }
        .leftMoney{
          color: #898989;font-size: 0.24rem;
        }
        .check{
          float: right;width: 0.3rem;height: 0.3rem;display: inline-block;border-radius: 50%;border: 0.015rem solid#E5E5E5;margin-top: 0.1rem;
        }
        .checked{
          background: url("../../common/imgs/blackradio.png") center center no-repeat;background-size: 100% 100%;border: none;
        }
      }
    }
  }
  #sec5{
    position: fixed;z-index: 1;bottom: 0;left: 0;width: 100%;padding: 0;border-top: 0.01rem solid#f8f8f8;
    .agreements{
      color: #898989;font-size: 0.24rem;padding: 0.25rem 0.3rem;display: block;
      input{
        opacity: 0;position: absolute;z-index: 1;left: 0;width: 1.5rem;height: 100%;top: 0;
      }
    }
    .leftText{
      position: relative;padding-left: 0.45rem;line-height: 0.3rem;height: 0.3rem;display: inline-block;
    }
    .leftText:before{
      content: '';display: block;width: 0.3rem;height: 0.3rem;border: 0.015rem solid#e5e5e5;position: absolute;z-index: 1;left: 0;top:0;border-radius: 0.06rem;box-sizing: border-box;
    }
    input:checked+.leftText:before{
      content: '';display: block;width: 0.3rem;height: 0.3rem;position: absolute;z-index: 1;left: 0;top:0;border-radius: 0.06rem;box-sizing: border-box;
      background: url("../../common/imgs/checkstyle_box.png") center center no-repeat;background-size: 100% 100%;border: 0;
    }
    em{
      font-size: 0.24rem;color: #FFD203;line-height: normal;font-style: normal;
    }
    #submitArea{
      border-top: 0.015rem solid#E5E5E5;height: 1.1rem;
      #submit{
        height: 100%;background: #FFD203;font-size: 0.3rem;float: right;width: 2rem;text-align: center;
      }
      >div{
        float: left;padding-left: 0.3rem;
        .totalMoney{
          font-size: 0.24rem;padding-top: 0.25rem;
          >span:last-child{
            color: #F67311;
          }
        }
        .wishGet{
          color: #595959;font-size: 0.22rem;padding-top: 0.1rem;
        }
        .coinPrice{
          color: #999999;font-size: 0.16rem;padding-top: 0.13rem;
        }
      }
    }
  }
  @media screen and (min-width: 1025px) {
    #sec5{
      width: 600px;left: 50%;margin-left: -300px;
    }
  }
</style>
